<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<!--徽章
			徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。
		-->
		<a href="#">Mailbox
			<span class="badge">50</span>
		</a>

		<!--激活导航状态
			您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 <span class="badge"> 来激活链接
		-->
		<h4>胶囊式导航中的激活状态</h4>
		<ul class="nav nav-pills">
			<li class="active">
				<a href="#">首页
					<span class="badge">42</span>
				</a>
			</li>
			<li>
				<a href="#">简介</a>
			</li>
			<li>
				<a href="#">消息
					<span class="badge">3</span>
				</a>
			</li>
		</ul>
		<br>
		<h4>列表导航中的激活状态</h4>
		<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
			<li class="active">
				<a href="#">
					<span class="badge pull-right">42</span>首页</a>
			</li>
			<li>
				<a href="#">简介</a>
			</li>
			<li>
				<a href="#">
					<span class="badge pull-right">3</span>消息
				</a>
			</li>
		</ul>
	</body>
</html>